<!-- 下拉刷新区域 -->
<template>
  <view
    v-if="mOption.use"
    class="mescroll-downwarp"
    :style="{ background: mOption.bgColor, color: mOption.textColor }"
  >
    <view class="downwarp-content">
      <view v-if="isDownLoading" class="downwarp-progress"></view>
      <view
        v-else
        class="downwarp-arrow"
        :style="{ transform: downRotate }"
      ></view>
      <view class="downwarp-tip">{{ downText }}</view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      option: Object, // down的配置项
      type: Number // 下拉状态（inOffset：1， outOffset：2， showLoading：3， endDownScroll：4）
    },
    computed: {
      // 支付宝小程序需写成计算属性,prop定义default仍报错
      mOption() {
        return this.option || {}
      },
      // 是否在加载中
      isDownLoading() {
        return this.type === 3
      },
      // 旋转的角度
      downRotate() {
        return this.type === 2 ? 'rotate(-180deg)' : 'rotate(0deg)'
      },
      // 文本提示
      downText() {
        switch (this.type) {
          case 1:
            return this.mOption.textInOffset
          case 2:
            return this.mOption.textOutOffset
          case 3:
            return this.mOption.textLoading
          case 4:
            return this.mOption.textLoading
          default:
            return this.mOption.textInOffset
        }
      }
    }
  }
</script>

<style>
  @import '../../../ZmMescrollUni/components/mescroll-down.css';
  @import './mescroll-down.css';
</style>
